<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <title>个人中心</title>
    <script src="../js/mui.min.js"></script> <!-- 引入 MUI 库 -->
    <link href="../css/mui.min.css" rel="stylesheet" />
    <style>
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .profile-container {
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin: 20px auto;
            max-width: 500px;
            text-align: center;
        }
        .profile-container img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 10px;
        }
        .profile-container .name {
            font-size: 22px;
            font-weight: bold;
            margin: 10px 0;
        }
        .profile-container .bio {
            color: #888;
            font-size: 14px;
            margin-bottom: 20px;
        }
        .profile-container .btn {
            background-color: #007aff;
            color: white;
            padding: 12px 20px;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
            margin-bottom: 10px;
            font-size: 16px;
            width: 100%;
            box-sizing: border-box;
        }
        .profile-container .btn:hover {
            background-color: #005bb5;
        }
        .logout-btn {
            background-color: #ff3b30; /* 红色背景 */
            margin-top: 20px;
        }
        .logout-btn:hover {
            background-color: #d32f2f;
        }

        /* 小屏幕优化 */
        @media (max-width: 480px) {
            .profile-container {
                margin: 10px;
                padding: 15px;
            }
            .profile-container .name {
                font-size: 18px;
            }
            .profile-container .btn {
                padding: 10px 16px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>

    <div class="mui-content">
        <!-- 用户个人信息区 -->
        <div class="profile-container">
            <img id="user-avatar" src="https://via.placeholder.com/100" alt="用户头像"> <!-- 用户头像 -->
            <div class="name" id="user-name">加载中...</div> <!-- 用户名 -->
            <div class="btn" onclick="editProfile()">编辑个人信息</div> <!-- 编辑按钮 -->
            <div class="btn" onclick="goToSettings()">设置</div> <!-- 设置按钮 -->
            <div class="logout-btn" onclick="logout()">退出登录</div> <!-- 退出登录按钮 -->
        </div>
    </div>

    <script>
        mui.init();

        // 调用 API 获取用户信息
        function fetchUserData() {
            const uid = localStorage.getItem('loginID');
            const apiUrl = "http://tcp.gykang.eu.org:8080/api/get_user?uid=" + uid; // 请替换成实际的 API 地址

            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    if (data.status === "success") {
                        // 使用 API 返回的数据动态更新页面内容
                        const userInfo = data.data;
                        document.getElementById("user-avatar").src = userInfo.image;
                        document.getElementById("user-name").textContent = userInfo.username;
                    } else {
                        mui.toast('获取用户信息失败');
                    }
                })
                .catch(error => {
                    mui.toast('网络请求失败');
                    console.error('Error fetching user data:', error);
                });
        }

        // 页面加载时调用 API 获取用户数据
        window.onload = fetchUserData;

        // 编辑个人信息的功能
        function editProfile() {
            mui.toast('跳转到编辑页面...');
        }

        // 跳转到设置页面
        function goToSettings() {
            mui.toast('跳转到设置页面...');
        }

        // 退出登录功能
        function logout() {
            localStorage.clear(); // 清除本地存储的用户信息
            mui.toast('退出成功');
            plus.webview.open('./login.html', 'new', {}, 'slide-in-right', 200);
        }
    </script>
</body>
</html>
